<template>
  <a-modal :visible="visible" :title='title' @cancel="() => { $emit('cancel') }"
           @ok="() => { $emit('create') }" :destroyOnClose="true" :maskClosable="false">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-item label="id" class="hidden">
        <a-input disabled v-decorator="['id']"/>
      </a-form-item>
      <a-form-item label="date" class="hidden">
        <a-input disabled v-decorator="['date']"/>
      </a-form-item>
      <a-form-item label="项目名称">
        <a-input placeholder="请输入项目名称" v-decorator="['title', { rules: [
            { required: true, message: '请输入项目名称' },
            { max: 20, message: '项目名称不得超过20位' }
            ]}]"/>
      </a-form-item>
      <a-form-item label="项目描述">
        <a-textarea placeholder="请输入项目描述" v-decorator="['describe', { rules: [
            { max: 255, message: '项目描述不得超过255位' }
            ],
            initialValue: ''
        }]" :rows="5"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'ProjectForm',
  props: ['visible', 'title'],
  data () {
    return {
      form: this.$form.createForm(this, { name: 'project' })
    }
  }
}
</script>

<style scoped lang="less">
.hidden {
  display: none;
}

/deep/ .ant-modal {
  padding-left: 80px;
}
</style>
